<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
</head>
<body>
    <div class="row">
        <div>
            没有节流的input <input type="text" id="inputa" />
        </div>
        <div>
            节流后的input <input type="text" id="inputc" />
        </div>
    </div>
    <script>
        const inputa = document.getElementById('inputa');
        const inputc = document.getElementById('inputc');
        
        // 耗时耗性能任务 => promise 包一下
        const ajax = (content) => {
            console.log(`ajax request ${content}`);
        }
        // 节流功能
        // 定义的时刻
        const throttle = (func,delay) => {
            // last 上一次是啥时候执行的
            // deferTimer 定时器id
            let last, deferTimer //自由变量
            // 才是事件的处理函数
            // func delay
            // 定义时，生成时 func delay 
            // keyup return func 调用是能找到闭包中的自由变量
            return (args) => {
                // 当前时间，隐式类型转换
                let now = +new Date()
                if(last && now - last < delay){
                    // 触发干掉
                    clearTimeout(deferTimer)
                    deferTimer =setTimeout(() => {
                        last = now
                        func(args)
                    },delay)    
                }else {
                    // 再次来到这个地方
                    last = now // 第一次
                    func(args) // 先执行一次
                }
            }
        }
        inputa.addEventListener('keyup',(e) =>{
            ajax(e.target.value)
        })

        let throttledFunc = throttle(ajax,1000)

        inputc.addEventListener('keyup',(e) => {
            let value = e.target.value;
            // googleSuggest 体验, 1000
            // qps 
            throttledFunc(value)
        })
    </script>
</body>
</html>